<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login</title>
    <link rel="stylesheet" href="css/login.css">
    <script src="js/jquery-3.3.1.js"></script>
    <!-- 登录页面 -->
</head>
<body>

    <script>

        //在js中使用长度判断用户名是否正确
        function judgeUsername(){
            if($("#username").val().length != null) {
                $("#username").css("border","0.5px solid green");
            }else {
                $("#username").css("border","0.5px solid red");
            }
        }

        //判断密码是否符合规范
        function judgePassword(){
            if($("#password").val().length > 8) {
                $("#password").css("border","1px solid green");
            }else {
                $("#password").css("border","1px solid red");
            }
        }

        // 这个是用来判断复选框有没有被选中
        // console.log($(".btn_check").is(':checked'));
        function judegCheckbox(){
            //返回一个布尔值。如果选中返回true，没有选中返回false
            return $(".btn_check").is(':checked');
        }

        // 判断两个输入框是否符合要求
        function judgeFlage(){
            if($("#username").val().length != null || $("#password").val().length < 8){
                    $(".point").css({"background-color":"#EF7474","border":"solid 1px #db5252"});
                    $(".point_txt").css("color","#db5252");
                }else {
                    $(".point").css({"background-color":"#8DDCE6","border":"solid 1px #479099"});
                    $(".point_txt").css("color","#479099");
                }
        }

        // console.log($(".point").css("background-color") == "rgb(141, 220, 230)");

        //通过背景颜色判断两个输入框是否成功输入
        function judgePoint(){
            return $(".point").css("background-color") == "rgb(141, 220, 230)";
        }


        $(function(){

            $("#username").blur(function(){
                judgeUsername();
                judgeFlage();
            });
            $("#password").blur(function(){
                judgePassword();
                judgeFlage();
            });

            // 如果复选框，没选上，或者是username和password为红，那么不能点击登录
            // if(judgeFlage() == false || judgePoint()){
            //
            // }

        })

    </script>

    <div class="login w">

        <!-- 这一部分是错误提示界面 -->
        <div class="point">
            <div class="point_txt">Enter your username and password</div>
        </div>


        <div class="background">

            <!-- 这一部分是登录界面 -->
            <div class="enter">

                <!-- 接着是登录需要的界面 -->
                <h3>Login panel</h3>

                <!-- 表单 -->
                <form>

                    <input type="text" name="username" id="username" placeholder="username">

                    <input type="password" name="password" id="password" placeholder="password">

                    <!-- 接着是按钮 -->
                    <input type="button" onclick="login()" name="" id="btn_login" value="login">

                    <script>

                        function login(){
                            $.ajax({
                                url:"user/login",
                                type:"post",
                                dataType:"json",
                                data:{
                                    "username":$("#username").val(),
                                    "password":$("#password").val()
                                },
                                success:function (data){
                                    if (data.ok == true){
                                        location.href="/index.html";
                                    }else {
                                        alert(data.message);
                                    }
                                }
                            })
                        }

                    </script>



                    <!-- 要求协议 复选框 -->
                    <input type="checkbox" class="btn_check">

                    <p>keep me logged in</p>

                </form>

            </div>
        </div>

        <div class="footer">
            <div class="regist">
                <p>Need an account? </p>
                <!-- 这里是个注册的页面 -->
                <a href="register.html">sign up</a>
            </div>
            <div class="forgot">
                <p>Forgot your password? </p>
                <a href="#">Click here</a>
            </div>
        </div>


    </div>
    
</body>
</html>